/** 组件样式
 * @module      _comp.scss
 * @description 自定义纯 CSS 组件样式
 * @author      wulidoge
 * @email       wulidoge@qq.com
 * @date        2025-06-07
 */
/* 依赖 */
@use 'var';

/* 变量接口 */
$blur-radius: var.$SAFE_AREA; // # 背景模糊半径
$spacing_box: var.$SAFE_AREA; // # 容器间/内元素间距
$width_page: var.$WIDTH_MOBILE; // # 屏幕宽度
$copyright: 'Copyright © 2025 Wulidoge';

// 页面
// 页面逻辑根节点
// page {
//   // width: 750rpx;
//   width: 100vw;
//   height: 100vh;
//   background-color: #eee;
//   overflow-y: scroll;
//   // 禁用橡皮筋回弹
//   overscroll-behavior: none;
// }
// page,
// .page {
//     display: block;
//     width: $width_page;
//     height: 100%;
//     position: relative;
//     &::after {
//         content: $copyright;
//         display: block;
//         position: absolute;
//         bottom: 0;
//         // left: 50%;
//         // z-index: ;
//     }
// }

// 背景：小程序中无法使用 url 设置 bg-img 因此采用 image.bg 元素 + 模板语法设置父元素背景
background,
.background {
    // @extend .background;
    // 位置
    position: fixed;
    left: 0;
    top: 0;
    z-index: calc(inherit - 1);
    // 大小：占满父元素
    width: 100%;
    height: 100%;
    background-color: #567;
    // 文字：居中
    color: #fff;
    font-size: calc(128rpx * 2);
    display: flex;
    justify-content: center;
    align-items: center;
}

// 容器
container,
.container {
    // z-index: 1;
    display: block;
    position: relative;
    margin: $spacing_box;
    border: 2px solid #fff;
    // width: calc($width_page - $spacing_box * 2);
    // width: 100%;
    // flex: 1;
    padding: $spacing_box;
    border-radius: calc($spacing_box / 3);
    // background-color: #fff;
    background-color: pink;
    item,
    .item {
        // display: block;
        // width: calc(100% - 4px);
        width: 100%;
        // flex: 1;
        // color: #000;
        // flex-shrink: 0;
        background-color: #fff;
    }
}

// 横栏/通栏
bar,
.bar {
    // display: block;
    // position: fixed;
    // position: absolute;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    min-height: calc(32rpx * 2);
    // padding: 0 (16rpx * 2);
    background-color: #fff;
    &.top {
        top: 0px;
    }
    &.bottom {
        position: fixed;
        bottom: 0px;
    }
    // left-side
    &.left {
        position: fixed;
        height: 100%;
        width: auto;
    }
    &.dock {
        position: fixed;
        margin: $spacing_box;
        width: calc($width_page - $spacing_box * 2);
        padding: calc(16rpx * 2 - $spacing_box);
    }
}

// 材质
// material,
.material,
.mat {
    // $list:;
    &-air {
        $color: rgba(
            $color: #000000,
            $alpha: 0,
        );
        background-color: $color;
        border-color: $color;
    }
    // # material-glass
    &-glass {
        background-color: rgba($color: #000000, $alpha: 0.1);
        -webkit-backdrop-filter: blur($blur-radius);
        backdrop-filter: blur($blur-radius);
    }
    &-light {
        background-color: #fff;
        color: #000;
    }
    &-dark {
        background-color: #000;
        color: #fff;
    }
    // # material-air
    // .air,
    // .glass {
    //   & * {
    //     @extend .air;
    //   }
    // }
}

// banner,.banner {}
// .box {
// }
// .panel {
// }

/*
 // 箭头
 arrow {
   $size: 32rpx;
   $font-size: $size / 16;
   $color: #999;
   $bg-color: #567;
   display: flex;
   justify-content: center;
   align-items: center;
   width: $size;
   height: $size;
   background-color: $bg-color;
   position: relative;
   &::before,
   &::after {
     display: block;
     content: "";
     background-color: $color;
     border-radius: $font-size / 2;
     position: absolute;
     top: 0;
     right: 0;
     // transform: rotate(45deg);
   }
   &::before {
     width: $font-size;
     height: $size / 2;
   }
   &::after {
     width: $size / 2;
     height: $font-size;
   }
   // border-top: $weight solid $color;
   // border-right: $weight solid $color;
   // border-radius: $size/8;
   // transform: rotate(45deg);
   // margin: 2px;
   // margin-right: $margin;
   // 箭头：右箭头 >
   // &.right {
   //   transform: rotate(45deg);
   //   // margin-right: $margin;
   // }
   // // 箭头：下箭头 v
   // &.down {
   //   transform: rotate(135deg);
   //   // margin-bottom: $margin;
   // }
   // // 箭头：左箭头 <
   // &.left {
   //   transform: rotate(-135deg);
   //   // margin-left: $margin;
   // }
   // // 箭头：上箭头 ^
   // &.up {
   //   transform: rotate(-45deg);
   //   // margin-top: $margin;
   // }
 }
 
 // 红点 🔴
 redot {
   $size: 14px;
   $len: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   width: (($size) * ($len));
   height: ($size);
   border-radius: (($size) * 0.5);
   font-size: (($size) * 0.7);
   // line-height:   ($size);
   // text-align: center;
   color: #ffffff;
   background-color: #ff0000;
   position: absolute;
   // top:  (  ($size) * -0.5);
   // right:  (  ($size) * -0.5);
   top: 0;
   right: 0;
 }
 */
